<template>
  <el-form :inline="true" :model="formInline" class="demo-form-inline">
    <el-form-item label="断奶日期：">
      <el-date-picker
        v-model="formInline.sDate"
        type="date"
        placeholder="请选择日期"
        style="width: 150px"
      />--
      <el-date-picker
        v-model="formInline.oDate"
        type="date"
        placeholder="请选择日期"
        style="width: 150px"
      />
    </el-form-item>
    <el-form-item label="仔猪耳号：">
      <el-input
        v-model="formInline.earNumber"
        placeholder="请输入种母耳号"
        style="width: 150px"
      />
    </el-form-item>
    <!-- <el-form-item label="断奶日龄：">
      <el-input
        v-model="formInline.fuzeren"
        placeholder="请输入日龄"
        style="width: 150px"
      />
      --
      <el-input
        v-model="formInline.fuzeren"
        placeholder="请输入日龄"
        style="width: 150px"
      />
    </el-form-item> -->
    <el-form-item label="断奶重(公斤)：">
      <el-input
        v-model="formInline.weaningWeight"
        placeholder="请输入重量"
        style="width: 150px"
      />
      --
      <el-input
        v-model="formInline.weaningWeight"
        placeholder="请输入重量"
        style="width: 150px"
      />
    </el-form-item>
    <el-form-item label="哺乳种母耳号：">
      <el-input
        v-model="formInline.motherEarNumber"
        placeholder="请输入种母耳号"
        style="width: 150px"
      />
    </el-form-item>
    <el-form-item>
      <el-button type="danger" @click="getData">查询</el-button>
      <el-button>重置</el-button>
    </el-form-item>
  </el-form>
  <el-button type="danger" style="margin-bottom: 10px" @click="getAdd">
    +新增
  </el-button>
  <el-button type="danger" style="margin-bottom: 10px" disabled>
    删除
  </el-button>
  <el-table
    :data="tableData"
    border
    style="width: 100%"
    @selection-change="handleSelectionChange"
  >
    <el-table-column type="selection" width="55" />
    <el-table-column prop="pigletsWeaningId" label="序号" align="center" width="80px"/>
    <el-table-column prop="earNumber" label="仔猪耳号" align="center" width="100px"/>
    <el-table-column prop="weaningDate" label="断奶日龄" align="center" width="180px">
      <template #default="scoped">
        {{ scoped.row.weaningDate.substr(0, 19).replace("T", " ") }}
      </template>
    </el-table-column>
    <el-table-column prop="weaningWeight" label="断奶重(公斤)" align="center" width="150px"/>
    <el-table-column
      prop="motherEarNumber"
      label="哺乳种母耳号"
      align="center"
      width="150px"
    />
    <el-table-column prop="" label="胎次" align="center" width="100px">
    </el-table-column>
    <el-table-column
      prop="currentbuilding"
      label="断奶栋舍"
      align="center"
      width="100px"
    />
    <el-table-column
      prop="currentfield"
      label="断奶栏位"
      align="center"
      width="100px"
    >
    </el-table-column>
    <el-table-column
      prop="bedroomName"
      label="转入栋舍"
      align="center"
      width="100px"
    />
    <el-table-column
      prop="fieldName"
      label="转入栏位"
      align="center"
      width="100px"
    />
    <el-table-column
      prop="weaningDate"
      label="断奶日期"
      align="center"
      width="180px"
    >
      <template #default="scoped">
        {{ scoped.row.weaningDate.substr(0, 19).replace("T", " ") }}
      </template>
    </el-table-column>
    <el-table-column prop="" label="创建人" align="center" width="100px" />
    <el-table-column prop="" label="创建时间" align="center" width="180px">
      <template #default="scoped">
        {{ scoped.row.weaningDate.substr(0, 19).replace("T", " ") }}
      </template>
    </el-table-column>
    <el-table-column label="操作" align="center">
      <template #default>
        <el-button link type="primary">编辑</el-button>
        <el-button link type="primary">删除</el-button>
      </template>
    </el-table-column>
  </el-table>

  <!-- 分页 -->
  <table>
    <tr>
      <td>
        <el-pagination
          v-model:current-page="formInline.pageIndex"
          v-model:page-size="formInline.pageSize"
          :page-sizes="[3, 5, 8, 10]"
          :background="true"
          layout="total,slot, prev, pager, next"
          :total="formInline.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          prev-text="上一页"
          next-text="下一页"
        >
          ，当前{{ formInline.pageIndex }}/{{
            formInline.pageCount
          }}页，每页显示{{ formInline.pageSize }}条
          <el-button
            class="btn-prev"
            link
            @click="handleCurrentChange(1)"
            :disabled="formInline.pageIndex == 1"
            >首页</el-button
          >
        </el-pagination>
      </td>
      <td>
        <el-pagination
          v-model:current-page="formInline.pageIndex"
          v-model:page-size="formInline.pageSize"
          :page-sizes="[3, 5, 8, 10]"
          :background="true"
          layout="slot, sizes,jumper"
          :total="formInline.totalCount"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          prev-text="上一页"
          next-text="下一页"
        >
          <el-button
            class="btn-prev"
            link
            @click="handleCurrentChange(formInline.pageCount)"
            :disabled="formInline.pageIndex == formInline.pageCount"
            >尾页</el-button
          >
        </el-pagination>
      </td>
    </tr>
  </table>
</template>

<script setup lang="ts">
import { ref, onMounted, reactive } from "vue";
import { ElMessage } from "element-plus";
import axios from "axios";
import { useRouter, useRoute } from "vue-router";

const apiUrl = import.meta.env.VITE_APP_API_URL;
const apiBedinUrl = import.meta.env.VITE_APPRead_API_URL;

const router = useRouter();
const route = useRoute();

//多选
const multipleSelection = ref([]);
const handleSelectionChange = (val: any) => {
  multipleSelection.value = val;
};
//新增
const getAdd = () => {
  router.push("/PigsWeaningAdd");
};
//仔猪断奶
const formInline = reactive({
  sDate: null,
  oDate:null,
  earNumber:'',
  motherEarNumber:'',
  weaningWeight:'',
  pageIndex: 1,
  pageSize: 3,
  totalCount: 0,
  pageCount: 0,
});

const tableData = ref([]);
//仔猪断奶显示
const getData = () => {
  axios
    .post(apiBedinUrl+"/api/PigletsWeanings/SearchPigletsWeaning", {
      sDate: formInline.sDate,
      oDate: formInline.oDate,
      pageIndex: formInline.pageIndex,
      pageSize: formInline.pageSize,
    })
    .then((res) => {
      console.log("仔猪断奶列表", res.data);
      tableData.value = res.data.data.list;
      formInline.pageCount = res.data.data.pageCount;
      formInline.totalCount = res.data.data.totalCount;
    });
};

//分页
const handleSizeChange = (val: number) => {
  console.log(`${val} items per page`);
  formInline.pageSize = val;
  getData();
};
const handleCurrentChange = (val: number) => {
  console.log(`current page: ${val}`);
  formInline.pageIndex = val;
  getData();
};
//生命周期钩子
onMounted(() => {
  getData();
});
</script>

<style scoped></style>
